<template>
    <div class="hospital">
        <div class="header">
            <div class="head_area"><img src="../../../assets/imgs/user.png" alt=""> 上海市</div>
            <div class="head_title">医疗救治定点医院和发热门诊一览</div>
        </div>
        <div class="details">
            <!-- 搜索 -->
            <el-input v-model="params.name" placeholder="请输入内容" width="30%" clearable></el-input>

            <!-- 定点医院 -->
            <div style="margin-top:20px;">
               <el-row v-for="(item,index) in hospitals.list" :key='item.id'>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" @click="toMapHandler(item)">
                            <div class="left">
                                <div>
                                    <span style="border-radius:50%;background-color:white;display:inline-block;width:20px;height:20px;line-height:20px;margin-right:5px;text-align:center;">{{index + 1}}</span>
                                    <span>{{item.name}}</span>
                                </div>
                                <div style="overflow:hidden">
                                    <span v-if="item.flags" style="background-color: #ffb34e;border-radius:3px;padding:0 5px;line-height:20px;font-size:12px;color:white;float:left">{{item.flags}}</span>
                                    <span v-else style="background-color: #ffb34e;border-radius:3px;padding:0 5px;line-height:20px;font-size:12px;color:white;float:left">暂无标记</span>
                                </div>
                                <div style="color: #999;font-size:14px;">{{item.province}} {{item.city}} {{item.area}}</div>
                            </div>
                            <div class="right">
                                <div style="padding:0 15px;"><img src="@/assets/imgs/location.png" style="height:20px;width:20px;margin-top:1rem"/></div>
                                <div>{{distanceHandler(item.longitude,item.latitude)}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import service from '@/utils/request'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 10
            },
            hospitals: [],
            // 当前经纬度
            current_lon: '',
            current_lat: ''
        }
    },
    created() {
        this.findAllHospitals();
        this.getLocation()
    },
    watch: {
        params: {
            handler() {
                this.findAllHospitals()
            },
            deep: true
        }
    },
    methods: {
        // 
        selectHandler() {

        },
        // 计算两地之间的距离
        distanceHandler(lat1, lng1) {
            var radLat1 = lat1*Math.PI / 180.0;
            var radLat2 = this.current_lon*Math.PI / 180.0;
            var a = radLat1 - radLat2;
            var  b = lng1*Math.PI / 180.0 - this.current_lat*Math.PI / 180.0;
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
            Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
            s = s *6378.137 ;// EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
            return s  // 单位千米
        },
        // 获取当前位置的地理位置
        getLocation() {
            navigator.geolocation.getCurrentPosition((res) => {
                this.current_lon = res.coords.longitude;
                this.current_lat = res.coords.latitude;
                // console.log(this.current_lon,this.current_lat,'当前位置');
            },(err) => {
                // err是形如 {code: 3, message: "Timeout expired"} 的对象
                console.log(err);
            },
            {
                enableHighAccuracy: true, //高精度
                timeout: 5000, //超时时间
                maximumAge: 10000, //位置缓存时间
            });
        },
        // 跳转到地图页面
        toMapHandler(item) {
            this.$router.push({
                path:'/hospitalFixed/details',
                query:{
                    longitude: item.longitude,
                    latitude: item.latitude
                }
            })
        },
        // 查询所有定点医院
        findAllHospitals() {
            service.get("/hospital/pageQuery",{params: this.params}).then(res => {
                this.hospitals = res.data
            })
        }
    }
}
</script>

<style scoped>
    .icon-user {
        font-size:26px;
    }
    .left {
        float: left;
        height: 90px;
    }
    .left div {
        line-height: 30px;
    }
    .right {
        float: right;
        height: 90px;
    }
    .right div {
        /* line-height:40px; */
    }
    .el-row {
        margin-bottom: 20px;
        /* &:last-child {
        margin-bottom: 0;
        } */
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #ededed;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 90px;
        padding:0 10px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .hospital >>> .el-input__inner {
        width: 20%;
    }
    .details {
        margin-top: 2rem;
    }
    img {
        height: 1rem;
        width: 1rem;
        color: #fff;
    }
    .head_area ,.head_title {
        font-size: 20px;
        font-weight: 700;
        line-height: 2em;
    }
    .header {
        background-image: url('../../../assets/imgs/hospital.png');
        height: 150px;
        background-size: cover;
        margin: -1em;
        padding: 1em;
        color: #fff;
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0; */
    }
</style>